<template>
    <div class="base-info-content">
        <div v-for="(item, index) in props.list" :key="index">
            <span class="zs-text-gray-dark zs-space-right">{{item.label}}</span>
            <span :class="{'zs-text-red': item.color == 1, 'zs-text-orange': item.color == 2, 'zs-text-green': item.color == 3}">{{item.value}}</span>
        </div>
    </div>
</template>

<script setup>

const props = defineProps({
    list: {
        type: Array,
        required: false,
    }
})
</script>

<style scoped lang="scss">
.base-info-content {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}
</style>
